<template>
  <el-form :inline="true" class="from">
    <el-form-item label="咨询师姓名：">
      <el-input
        v-model="param.goodsName"
        placeholder="输入咨询师名称"
        class="w206"
      />
    </el-form-item>

    <el-form-item label="添加时间：">
      <el-date-picker
        v-model="param.startTime"
        type="date"
        class="w206"
        placeholder="开始时间"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
      &nbsp; 至 &nbsp;
      <el-date-picker
        v-model="param.endTime"
        type="date"
        class="w206"
        placeholder="结束时间"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item label="咨询师类型：">
      <el-select v-model="param.region" placeholder="全部" class="w180">
        <!-- <el-option v-for="(value,key) in refundStatus" :key="key" :label="value" :value="key" /> -->
        <el-option label="男" value="shanghai" />
        <el-option label="女" value="beijing" />
      </el-select>
    </el-form-item>
    <br />

    <el-form-item>
      <el-button type="primary" class="w115" @click="getList(1)"
        >搜索</el-button
      >
      <el-button @click="rewrite" text type="primary">
        <el-icon :size="16">
          <refresh />
        </el-icon>
        &nbsp;重置筛选条件
      </el-button>
      <el-button>导出</el-button>
    </el-form-item>
  </el-form>

  <el-form :model="form" ref="submitForm" label-width="140px" :rules="rules">
    <p class="bgtit marb30">添加课程基础信息</p>

    <el-form-item label="课程名称：" prop="courseTitle">
      <el-input
        v-model="form.courseTitle"
        placeholder="请输入课程名称，字数限制在5~30"
        class="w460"
      />
    </el-form-item>

    <el-form-item label="课程封面：" prop="img">
      <el-upload
        :headers="{ token: $store.state.token }"
        :action="uploadUrl"
        :on-success="(val) => uploadImgSuccess(val, 'img')"
        class="avatar-uploader"
        :show-file-list="false"
        accept="image/*"
        name="files"
      >
        <div style="width: 80px; height: 80px">
          <img v-if="form.img" :src="form.img" class="img-contain wh100p" />
          <el-icon v-else size="28px" class="wh100p" color="#8c939d"
            ><Plus
          /></el-icon>
        </div>
      </el-upload>
      <div class="col9e lh20 padt10 font12">
        比例：16：9；尺寸：> 1080*608；文件大小： &lt;
        2M；支持格式：JPG、PNG、BMP
      </div>
    </el-form-item>

    <el-form-item label="课程类目：" prop="cateId">
      <el-select
        v-model="form.cateId"
        placeholder="请选择课程类目"
        class="w180"
      >
        <el-option
          v-for="(item, index) in courseCate"
          :key="index"
          :label="item.cateTitle"
          :value="item.cateId"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="课程价格：" prop="isFree">
      <el-radio-group v-model="form.isFree">
        <el-radio :label="2">付费</el-radio>
        <el-radio :label="1">免费</el-radio>
      </el-radio-group>
      <br />
      <el-input
        v-if="form.isFree == '2'"
        v-model="form.price"
        placeholder=""
        class="w180"
      >
        <template #append>课程币</template>
      </el-input>
    </el-form-item>

    <el-form-item label="课程详情：">
      <div style="max-width: 900px">
        <wangEditor
          @handleChange="getHtml"
          :valueHtml="form.content"
        ></wangEditor>
      </div>
      <el-input
        v-model="form.introduce"
        :autosize="{ minRows: 6 }"
        type="textarea"
        placeholder="请输入该咨询师的个人介绍"
        class="w460"
      />
    </el-form-item>

    <el-form-item>
      <el-button @click="submit" class="w140" type="primary"
        >{{ id ? "提交" : "下一步" }}
      </el-button>
    </el-form-item>
  </el-form>

  <div class="bgf mart20" v-loading="loading">
    <el-table :data="list">
      <el-table-column
        fixed
        label="咨询师头像"
        show-overflow-tooltip
        min-width="160"
      >
        <template #default="scope">
          <div class="flex flexa padr14">
            <img
              :src="utils.splitImgStr(scope.row.img)"
              class="img-cover radius4"
              width="60"
              height="60"
            />
            <div class="padl14 font12" style="width: calc(100% - 60px)">
              <p class="col1d text1 block">{{ scope.row.courseTitle }}</p>
              <p class="col9a text1">ID：{{ scope.row.courseId }}</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="price"
        min-width="80"
        label="价格"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column fixed="right" label="操作" width="240">
        <template #default="scope">
          <el-button
            v-if="param.status == '1'"
            @click="cgeShelf(2, scope.row.courseId)"
            text
            type="primary"
            >下架</el-button
          >
          <el-divider direction="vertical" />
        </template>
      </el-table-column>
    </el-table>
    <div class="h70 pad20 flexab">
      <p class="font10 cola4">共 {{ total }} 条</p>
      <el-pagination
        v-model:currentPage="param.pageNumber"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="param.pageSize"
        layout=" sizes, prev , jumper , next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import wangEditor from "@/components/wangEditor.vue"
export default {
  components: { wangEditor },
  data() {
    return {
      param: {},
      id: '',
      loading: false,
      fullscreenLoading: false,
      uploadUrl: this.$public.uploadUrl,

      form: {},
      content: '',

      rules: {
        goodsName: [{ required: true, message: '请输入课程名', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型！', trigger: 'change', }],
        shopPrice: [{ required: true, message: '请输入售价', trigger: 'blur' }],
        price: [{ required: true, message: '请输入售价', trigger: 'blur' }],
        storeCount: [{ required: true, message: '请输入库存', trigger: 'blur' }],
      },
    }
  },
  created() {
    let that = this;
    that.id = that.$route.query.id;
    if (that.id) {
      that.getData();
    }

    that.getCate();
  },
  methods: {

    getHtml(val) {
      console.log(val, '000')
      this.content = val.value;
    },

    getData() {
      let that = this;
      // 课程详情
      console.log(that.id, 'that.id')
      that.$api.courseById({ courseId: that.id }).then(res => {
        if (res) {
          console.log(res, '课程详情77777');
          that.form = res;
        }
      });
    },

    // 提交发布
    submit() {
      let that = this;
      // that.$router.push('/recordChapAddSingle');
      // return
      that.$refs['submitForm'].validate((val) => {
        if (val) {
          console.log('通过')
          // that.fullscreenLoading = true;
          if (that.id) {
            delete that.form.courseDtos
          }
          let body = {
            content: that.content,
          }
          console.log(that.form, 'all-----------');
          that.$api.insertCourse(that.form, body).then(res => {
            that.fullscreenLoading = false;
            console.log(res, 'res');
            if (res) {
              that.$message.success('提交成功');
              if (that.id) {
                that.$router.go(-1);
              } else {
                that.$router.replace('/recordChapAddSingle?id=' + res.courseId);
              }
            }
          });
        }
      })
    },

    // 课程类目、老师
    async getCate() {
      let that = this;

      // 老师
      let res1 = await that.$api.teacherList({ pageNumber: 1, pageSize: 1000 });
      console.log(res1, 'res1---------')
      if (res1) {
        that.teacherArr = res1.records;
      }

      // 课程类目
      let res3 = await that.$api.courseCateList({ pageNumber: 1, pageSize: 1000 });
      console.log(res3, 'res3---------')
      if (res3) {
        that.courseCate = res3.records;
      }

      // if(that.id!='add'){
      //     that.getData()
      // }
    },

    //图片上传成功
    uploadImgSuccess(val, key, key2) {
      console.log(val, key)
      if (val.status == 200) {
        let obj = this.utils.Decrypt(val.data);
        // console.log(obj)
        if (key2) {
          this[key][key2] = obj.path;
        } else {
          this.form[key] = obj.path;
        }
      }
    },

  }
}
</script>
<style lang="scss" scoped>
.manage1 {
  overflow: hidden;
  padding: 20px;
  .from {
    background: #f2f3f5;
    padding: 24px 16px 4px;
    margin-top: 20px;
  }
}
.padl120 {
  padding-left: 120px;
}
.ul1 {
  li {
    background-color: #f2f7fb;
    padding: 16px 23px;
    font-size: 14px;
    margin-top: 20px;
    p {
      width: 86px;
      display: inline-block;
    }
    .r_icon {
      width: 30%;
    }
    .stit {
      // min-width: 186px;
      padding-right: 40px;
      display: inline-block;
    }
  }
}

:deep .el-checkbox-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
:deep .el-checkbox-button__inner {
  border-left: var(--el-border);
}

:deep .el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
}

:deep .el-input-group__prepend {
  width: 30px;
  text-align: center;
  padding: 0;
}

:deep .el-input-group__append {
  text-align: center;
  padding: 0 10px;
}
.release {
  padding: 28px 16px;
}
.video,
.el-icon.video-uploader-icon {
  width: 193px;
  height: 115px;
}
.avatar {
  width: 260px;
  height: 155px;
  object-fit: contain;
}
.specImg {
  width: 32px;
  height: 32px;
}
.el-icon.specImg {
  width: 32px;
  height: 32px;
}
.el-icon.avatar-uploader-icon {
  width: 260px;
  height: 155px;
}
:deep .el-upload--picture-card {
  width: 80px;
  height: 80px;
}
</style>
 